<template>
  <div v-if="columns.length" class="card table-search">
    <el-form ref="formRef" :model="searchParam">
      <Grid
        ref="gridRef"
        :collapsed="collapsed"
        :gap="[20, 0]"
        :cols="searchCol"
      >
        <template v-for="(item, index) in columns">
          <GridItem
            v-if="item.searchItem"
            :key="item.prop"
            v-bind="getResponsive(item)"
            :index="index + 1"
          >
            <el-form-item :label="`${item.label} :`">
              <SearchFormItem :column="item" :search-param="searchParam" />
            </el-form-item>
          </GridItem>
        </template>

        <GridItem :suffix="true">
          <div class="operation">
            <el-button type="primary" :icon="Search" @click="search">
              搜索
            </el-button>
            <el-button :icon="Delete" @click="reset"> 重置 </el-button>
            <el-button
              v-if="showCollapse"
              type="primary"
              link
              class="search-isOpen"
              @click="collapsed = !collapsed"
            >
              {{ collapsed ? "展开" : "合并" }}
              <el-icon class="el-icon--right">
                <component :is="collapsed ? ArrowDown : ArrowUp"></component>
              </el-icon>
            </el-button>
          </div>
        </GridItem>
      </Grid>
    </el-form>
  </div>
</template>
<script setup lang="ts" name="SearchForm">
import { computed, ref } from "vue";
// import { ColumnProps } from "@/components/ProTable/interface";
// import { BreakPoint } from "@/components/Grid/interface";
import { Delete, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import SearchFormItem from "./components/SearchFormItem.vue";
import Grid from "@/components/Grid/index.vue";
import GridItem from "@/components/Grid/components/GridItem.vue";
import type { SearchType } from "./interface";
import type { GridType } from "@/components/Grid/interface/";

// type ColumnProps = any;
// type BreakPoint = any;

// interface ProTableProps {
//   columns?: ColumnProps[]; // 搜索配置列
//   searchParam?: { [key: string]: any }; // 搜索参数
//   searchCol: number | Record<BreakPoint, number>;
//   search: (params: any) => void; // 搜索方法
//   reset: (params: any) => void; // 重置方法
// }

// 默认值
const props = withDefaults(defineProps<SearchType.Props>(), {
  columns: () => [],
  searchParam: () => ({}),
});

// 获取响应式设置
const getResponsive = (item: ColumnsProps) => {
  return {
    span: item.searchItem?.span,
    offset: item.searchItem?.offset ?? 0,
    xs: item.searchItem?.xs,
    sm: item.searchItem?.sm,
    md: item.searchItem?.md,
    lg: item.searchItem?.lg,
    xl: item.searchItem?.xl,
  };
};

// 是否默认折叠搜索项
const collapsed = ref(true);

// 获取响应式断点
const gridRef = ref();
const breakPoint = computed<GridType.BreakPoint>(
  () => gridRef.value?.breakPoint
);

// 判断是否显示 展开/合并 按钮
const showCollapse = computed(() => {
  let show = false;
  props.columns.reduce((prev, current) => {
    prev +=
      (current.searchItem![breakPoint.value]?.span ??
        current.searchItem?.span ??
        1) +
      (current.searchItem![breakPoint.value]?.offset ??
        current.searchItem?.offset ??
        0);
    if (typeof props.searchCol !== "number") {
      if (prev > props.searchCol[breakPoint.value]) show = true;
    } else {
      if (prev >= props.searchCol) show = true;
    }
    return prev;
  }, 0);
  return show;
});
</script>

<style scoped lang="less">
.card {
  box-sizing: border-box;
  padding: 20px;
  overflow-x: hidden;
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color-light);
  border-radius: 6px;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}
</style>
